<!DOCTYPE html>
<html>
<head>
    <title>Velocity vs. Time Graph</title>
</head>
<body>
    <canvas id="physicsCanvas" width="550" height="500"></canvas>
    <script>
        const canvas = document.getElementById('physicsCanvas');
        const ctx = canvas.getContext('2d');

        // Define graph parameters
        const margin = { top: 50, right: 25, bottom: 50, left: 75 };
        const canvasWidth = canvas.width;
        const canvasHeight = canvas.height;
        const graphWidth = canvasWidth - margin.left - margin.right;
        const graphHeight = canvasHeight - margin.top - margin.bottom;

        const tMin = 0, tMax = 10;
        const vMin = -5, vMax = 5;

        // --- Coordinate transformation functions ---
        function getX(t) {
            return margin.left + (t / tMax) * graphWidth;
        }

        function getY(v) {
            // Invert y-axis for canvas coordinates
            return margin.top + graphHeight - ((v - vMin) / (vMax - vMin)) * graphHeight;
        }

        // --- Drawing Functions ---

        // 1. Draw Grid
        function drawGrid() {
            ctx.strokeStyle = '#cccccc';
            ctx.lineWidth = 1;

            // Vertical grid lines (every 1 second)
            for (let t = tMin; t <= tMax; t++) {
                ctx.beginPath();
                ctx.moveTo(getX(t), margin.top);
                ctx.lineTo(getX(t), margin.top + graphHeight);
                ctx.stroke();
            }

            // Horizontal grid lines (every 1 m/s)
            for (let v = vMin; v <= vMax; v++) {
                ctx.beginPath();
                ctx.moveTo(margin.left, getY(v));
                ctx.lineTo(margin.left + graphWidth, getY(v));
                ctx.stroke();
            }
        }

        // 2. Draw Axes
        function drawAxes() {
            ctx.strokeStyle = '#000000';
            ctx.lineWidth = 2;

            // X-axis (v=0)
            ctx.beginPath();
            ctx.moveTo(margin.left, getY(0));
            ctx.lineTo(margin.left + graphWidth, getY(0));
            ctx.stroke();

            // Y-axis (t=0)
            ctx.beginPath();
            ctx.moveTo(getX(0), margin.top);
            ctx.lineTo(getX(0), margin.top + graphHeight);
            ctx.stroke();
        }

        // 3. Draw Labels and Titles
        function drawLabels() {
            ctx.fillStyle = '#000000';
            ctx.font = '16px Arial';

            // X-axis labels
            ctx.textAlign = 'center';
            ctx.textBaseline = 'top';
            for (let t = 0; t <= tMax; t += 2) {
                ctx.fillText(t, getX(t), getY(0) + 8);
            }

            // X-axis Title
            ctx.fillText('Time (s)', getX(tMax / 2), canvasHeight - 25);

            // Y-axis labels
            ctx.textAlign = 'right';
            ctx.textBaseline = 'middle';
            for (let v = vMin; v <= vMax; v += 5) {
                ctx.fillText(v, getX(0) - 8, getY(v));
            }

            // Y-axis Title
            ctx.save();
            ctx.translate(margin.left - 50, margin.top + graphHeight / 2);
            ctx.rotate(-Math.PI / 2);
            ctx.textAlign = 'center';
            ctx.fillText('Velocity (m/s)', 0, 0);
            ctx.restore();
        }

        // 4. Draw the velocity graph
        function drawGraphLine() {
            ctx.strokeStyle = '#000000';
            ctx.lineWidth = 3;
            ctx.beginPath();
            ctx.moveTo(getX(0), getY(0));
            ctx.lineTo(getX(3), getY(4));
            ctx.lineTo(getX(5), getY(4));
            ctx.lineTo(getX(9), getY(-4));
            ctx.lineTo(getX(10), getY(-4));
            ctx.stroke();
        }

        // --- Main Drawing Execution ---
        ctx.clearRect(0, 0, canvasWidth, canvasHeight);
        drawGrid();
        drawAxes();
        drawLabels();
        drawGraphLine();

    </script>
</body>
</html>